<template>
  <div style="display: flex;flex-direction: column;height: 100vh">
    <div style="position: relative; z-index: 99">
      <div style="position: absolute;right: 20px;top:20px;">
        <fullscreen></fullscreen>
      </div>
    </div>
    <SysMenu  @menuClick="menuClick($event)" style="margin: 0px;border-bottom: none"></SysMenu>
    <div style="  position: fixed;top: 50%;right: 0px;width: 40px;height: 50px;background-color: #d3ff77;z-index: 101;"></div>
    <div style="position: relative;flex-grow: 1;margin: 0px;">
      <div style="position: absolute;right:0; top:-1px;height:100%; width:40px; background-color: #6b778c; z-index: 100"></div>
      <div style="position: absolute;right: 20px;top:10px; z-index: 98" v-if="tabs.length>0">
        <TagPageClose :tabs = "tabs" :current-index="currentIndex">
        </TagPageClose>
      </div>
      <el-tabs v-model="activeTab" @tab-remove="removeTab" style="height: 100%;margin-right: 40px" closable type="card">
        <el-tab-pane v-for="(tabPage, index) in tabs" :key="index" :label="tabPage.title" style="height: 100%;" :name="tabPage.name">
          <NvEntry :config="tabPage.config" v-if="tabPage.moduleCode === ConstDef.MODULE_CODE_ENTRY" @tabPage="onTabPage($event)"></NvEntry>
          <NvFilter :config="tabPage.config" v-else-if="tabPage.moduleCode === ConstDef.MODULE_CODE_FILTER" @tabPage="onTabPage($event)"></NvFilter>
          <NvSteps :config="tabPage.config" v-else-if="tabPage.moduleCode === ConstDef.MODULE_CODE_STEPS" @tabPage="onTabPage($event)"></NvSteps>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import SysMenu from '../components/menu/SysMenu'
import NvEntry from './basic/NvEntry'
import NvFilter from './basic/NvFilter'
import menuFunction from '../js/MenuFunction'
import ConstDef from '../js/ConstDef'
import NvSteps from '../components/compound/NvSteps'
import fullscreen from '../components/header/fullscreen'
import TagPageClose from './components/TagPageClose'
import bus from 'vue3-eventbus'

export default {
  name: 'PlatformConsole',
  components: {
    SysMenu,
    NvEntry,
    NvFilter,
    NvSteps,
    fullscreen,
    TagPageClose
  },
  setup () {
    const activeTab = ref('')
    const tabs = ref([])
    const menuData = ref([])
    const currentIndex = computed(() => {
      for (let i = 0; i < tabs.value.length; i++) {
        const tab = tabs.value[i];
        if (tab.name === activeTab.value) { return i; }
      }
      return -1;
    })

    onMounted(async() => {
      bus.on("tabPage", (tabPage) => {
        onTabPage(tabPage)
      });
    })

    async function menuClick (menu) {
      if (menu.moduleCode === ConstDef.MODULE_CODE_ENTRY) {
        const menuFunctionMsg = await menuFunction.getEntryConfigTabPage(menu.mdCode, menu.mvCode);
        if (!menuFunctionMsg.success) { return; }
        const tabPage = menuFunctionMsg.value;
        onTabPage(tabPage);
      } else if (menu.moduleCode === ConstDef.MODULE_CODE_FILTER) {
        const menuFunctionMsg = await menuFunction.getFilterConfigTabPag(menu.mdCode, menu.mvCode);
        if (!menuFunctionMsg.success) { return; }
        const tabPage = menuFunctionMsg.value;
        onTabPage(tabPage);
      } else if (menu.moduleCode === ConstDef.MODULE_CODE_STEPS) {
        const menuFunctionMsg = await menuFunction.getCompositeTabPage(menu.mdCode, menu.mvCode);
        if (!menuFunctionMsg.success) { return; }
        const tabPage = menuFunctionMsg.value;
        onTabPage(tabPage);
      }
    }
    function onTabPage(tabPage) {
      tabs.value.push(tabPage);
      activeTab.value = tabPage.name;
    }

    function removeTab(name) {
      for (const i in tabs.value) {
        if (tabs.value[i].name === name) {
          tabs.value.splice(i, 1);
          if (tabs.value.length === 0) {
            activeTab.value = '';
          } else if (tabs.value.length - 1 >= i) {
            activeTab.value = tabs.value[i].name;
          } else {
            activeTab.value = tabs.value[tabs.value.length - 1].name;
          }
          break;
        }
      }
    }
    return {
      activeTab,
      tabs,
      menuData,
      menuClick,
      onTabPage,
      ConstDef,
      removeTab,
      currentIndex
    }
  }
}
</script>

<style scoped>
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }

  .el-tabs--right .el-tabs__content,
  .el-tabs--left .el-tabs__content {
    height: 100%;
  }
</style>
